<HTML><HEAD>
	<SCRIPT>var isomorphicDir="../../isomorphic/";</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR='papayawhip' MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>

	Drag appearance example

</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>

	Isomorphic SmartClient

</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>


<!--------------------------
  Example code starts here
---------------------------->

<!-- HTML form containing two checkbox controls -->
<DIV STYLE='padding:0px 0px 0px 20px' CLASS='normal'>
<form action="" method="POST" name="f">
<input type="Checkbox" name="intersect" onclick="setIntersectStyles(this.checked)">dropOver on widget intersection<br>
<input type="Checkbox" name="resetPos">reset widget position on dragRepositionStop
</form>
</DIV>

<SCRIPT>

// --------------------------------------------------
//    canDragReposition widget with TARGET dragAppearance
// --------------------------------------------------

Canvas.create({
    ID:"dragReposition",
    left:50,
    top:125,
    width:100,
    height:100,
    contents:"Target Drag",
    backgroundColor:"violet",
    canDragReposition:true,
    canDrop:true,
    dragAppearance:"target",
    dragRepositionStop:"if (resetPosition.checked) return false;"
});


// --------------------------------------------------
//    Outline Drag widget...
// --------------------------------------------------
Canvas.create({
    ID:"dragOutline",
    left:310,
    top:125,
    width:100,
    height:100,
    canDragReposition:true,
    canDrop:true,
    contents:"Outline Drag",
    backgroundColor:"gold",
    dragAppearance:"outline",
    dragRepositionStop:"if (resetPosition.checked) return false;"
});

// --------------------------------------------------
//    canDrag widget with TRACKER dragAppearance
// --------------------------------------------------
Canvas.create({
    ID:"dragTracked",
    left:50,
    top:385,
    width:100,
    height:100,
    contents:"Use Drag Tracker",
    backgroundColor:"lightgreen",
    canDragReposition:true,
    canDrop:true,
    dragAppearance:"tracker",
    setDragTracker:"EventHandler.setDragTracker(this.imgHTML('yinyang_icon.gif',20,20))",
    dragRepositionStop:"if (resetPosition.checked) return false;"
});


// --------------------------------------------------
//    Parent of next widget
// --------------------------------------------------
Canvas.create({
    ID:"topParent",
    left:310,
    top:385,
    width:100,
    height:100,
    canDrop:true,
    contents:"parent",
    backgroundColor:"salmon",
    dragRepositionStop:"if (resetPosition.checked) return false;",
    dragAppearance:"outline"

});
// --------------------------------------------------
//    canDragReposition child widget with dragTarget set to "top"
// --------------------------------------------------
Canvas.create({
    ID:"dragRepositionTop",
    autoDraw:false,
    left:20,
    top:20,
    width:60,
    height:60,
    contents:"Drag Reposition Top",
    backgroundColor:"mediumpurple",
    canDragReposition:true,
    dragTarget:"top"
});
topParent.addChild(dragRepositionTop);


// --------------------------------------------------
//    canAcceptDrop widget
// --------------------------------------------------
Canvas.create({
    ID:"dropZone",
    left:180,
    top:255,
    width:100,
    height:100,
    contents:"Drop Zone",
    backgroundColor:"skyblue",
    canAcceptDrop:true,
    dropOver:"this.setBackgroundColor('powderblue')",
    dropOut:"this.setBackgroundColor('skyblue')",
    drop:"alert('drop')"
});
//dropZone.sendToBack();



// --------------------------------------------------
//    scripts for working with the HTML form
// --------------------------------------------------

// shortcut references to form elements
var resetPosition = document.f.resetPos;

// switch dragIntersectStyles
function setIntersectStyles(on) {
    if (on) {
    dragTracked.dragIntersectStyle="rect";
    dragTracked.setContents("Use Drag Tracker (intersect rect)");
    dragReposition.dragIntersectStyle="rect";
    dragReposition.setContents("Drag Reposition (intersect rect)");
    dragOutline.dragIntersectStyle="rect";
    dragOutline.setContents("Outline Drag (intersect rect)");
    // NOTE: you need to change the dragIntersectStyle of the topParent,
    //    since that ends up being the dragTarget
    topParent.dragIntersectStyle="rect";
    dragRepositionTop.setContents("Drag Reposition Top (intersect rect)");
    }
    else {
    dragTracked.dragIntersectStyle="mouse";
    dragTracked.setContents("Use Drag Tracker");
    dragReposition.dragIntersectStyle="mouse";
    dragReposition.setContents("Drag Reposition");
    dragOutline.dragIntersectStyle="mouse";
    dragOutline.setContents("Outline Drag");
    // NOTE: you need to change the dragIntersectStyle of the topParent,
    //    since that ends up being the dragTarget
    topParent.dragIntersectStyle="mouse";
    dragRepositionTop.setContents("Drag Reposition Top");
    }
}

// initialize the form
function initializeForm() {
    document.f.intersect.checked = false;
    resetPosition.checked = true;
}

Page.setEvent("load", "initializeForm()");

</SCRIPT>
</BODY>
</HTML>
